Chrome Extensionを作る
reactで作る
雛形は使うほどではないので使う必要はない
バージョンが上がっていないにもかかわらず昔の記事は参考にならなかったりする
ChromeAPIのライブラリの型定義ファイルの各methodの説明がかなり詳しいかもしれないmrsekut.icon
optionalのmethodに、「これを使いたいならこれをincludeしろよ」って書いてあった
限定公開
ハマりポイント
tutorial
ChromeExtensionの種類(普通にもっとある)
Background Page
Chrome全体の裏で動くページ(ページではない)
各イベントリスナーの登録をする
ユースケース
ページ遷移時、ブックマーク登録時
メモリ的に無駄が多いので代わりにEvent Pageの使用が推奨されている
Event Page
Content Scripts
各ページの裏で動くスクリプト
ユースケース
DOM操作、PageActionのキャッシュ保持
Page Action
Chromeのツールバーのアイコンをクリックしたときに表示されるHTML
キャッシュは保持されない
特定のページに作用する
Browser Action
Chromeのツールバーのアイコンをクリックしたときに表示されるHTML
キャッシュは保持されない
ブラウザ全体に作用する
任意のページにアクセスしたときに、そのページのURLを取得したい
それをclgに表示
プロジェクト作成
$ yarn init
$ yarn add -D typescript
$ yarn tsc --init
場所どこでもいいの？
最初はたぶんルート
content_scripts.js
ルートなファイル
この名前でないといけないわけではないが、デファクトスタンダード？
以下2つを読めばいける
動かしてみる
ビルドする
chrome://extensions/で「パッケージ化されていない拡張機能を読み込む」
mathesのリンクに行き強制リロード
manifest.jsonの設定
manifest_version
マニフェストファイルのバージョン。現在は2しか指定できない
matches
js
content_scripts
開いているwebページに影響するscript
background
content_scriptやdefault_popupとの連携
persistentをtrueにするとイベントページになる ref default_popup
拡張機能のポップアップ
アイコンをクリックしたときに表示されるpopupをhtmlで書く
permissions
どのChrome APIを使うかを指定する
URL書くやつなんなん
activeTab
表示中のタブへのアクセス権限
clipboardWrite
クリップボードへのコピー権限
公開されているChrome拡張のmanifest.jsonを見る方法 ref chrome://extensions/にアクセスし、IDを確認
chrome-extension://<ID>/manifest.jsonにアクセス
例えばハテブのなら
chrome-extension://dnlfpnhinnjdgmjfpccajboogcjocdla/manifest.json
API
みづれーーーー
manifestの
browser_action.default_popupにhtmlを追加したらクリックしたら表示された
良い記事
メッセージ通信
chrome.runtime.sendMessageでメッセージを送信
chrome.runtime.onMessage.addListenerでメッセージを受信
デバッグの方法
使う種類によって異なる
これむずすぎやろ。。
popupの場合は、popup上で右クリックでcdtを開く必要がある
backgroundの場合は、
https://gyazo.com/6a0def83ae4d5939d6b8c18586fdd942 https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F314351%2Fdd996052-7878-6874-418c-79bf5282dac2.png?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&w=1400&fit=max&s=2b5611b63694fbc94d9a8a349d63f13d
APIの調べ方
EventListner知らなさすぎるmrsekut.icon*2
いちいちビルドして読み込ませるの面倒すぎる
なんかあるだろ？？さすがに？？
作ってみた系の記事
React